<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组件生命周期</title>
</head>

<body>
    <h1>组件生命周期</h1>
    <h2>挂载</h2>
    <ol>
        <li>constructor(): 在 React 组件挂载之前，会调用它的构造函数。</li>
        <li>render(): render() 方法是 class 组件中唯一必须实现的方法。</li>
        <li>componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。只调用一次。</li>
    </ol>
    <h2>更新</h2>
    <ol>
        <li>render(): render() 方法是 class 组件中唯一必须实现的方法。</li>
        <li>componentDidUpdate(): 在更新后会被立即调用。</li>
    </ol>
    <h2>卸载</h2>
    <ol>
        <li>componentWillUnmount(): 在组件卸载及销毁之前直接调用。</li>
    </ol>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    class MyCom extends React.Component {

        constructor(props) {
            super(props)
            this.state = {
                value: "",
                date: new Date()
            }
            console.log("我是constructor");
        }

        componentDidMount() {
            console.log("我是componentDidMount");
            // 如果内部调用setState会触发render()，即使属性没有使用，也会触发重绘
            // this.setState({aaa: new Date()})
        }

        componentDidUpdate() {
            console.log("我是componentDidUpdate");
            // 不要再内部setState，会导致递归
            // this.setState({date: new Date()});
        }

        componentWillUnmount() {
            console.log("我是componentWillUnmount");
            // 不要调用setState()因为永远不会被渲染
        }

        render() {
            console.log("我是render");
            return (
                <div>
                    <div>我是一个类组件</div>
                    <input type="text" onInput={(e) => { this.setState({ value: e.target.value }) }} />
                    <p>{this.state.date.toLocaleTimeString()}</p>
                </div>
            )
        }
    }

    ReactDOM.render(<MyCom />, document.getElementById("demoReact"));

</script>

</html>